<template>
  <view class="index-mine">
    <u-loading-page :loading="isLoading"></u-loading-page>
    <view v-if="!isLoading">
      <view class="top-bg">
        <image :src="mineBg" class="top-bg-img" />
      </view>
      <view class="avatar">
        <view class="img"><u-avatar :src="avatarUrl" :size="60"></u-avatar></view>
        <view class="text">
          <view class="name">{{username}} <text class="user-type">{{ userType === '1'?$t('mine.geRen'):$t('mine.qiYeYg') }}</text></view>
          <view v-if="token" class="user-info-text">
            {{ gender =='1'?'男':'女' }} | <text> {{ age }}</text> | {{ phone }}
          </view>
          <view v-else>{{ $t('index.kaiQi') }}</view>
        </view>
      </view>
      <view class="mine-banner">
        <image :src="bannerImg" class="banner-img" />
        <view class="banner-content">
          <view class="top">
            <u-cell center :border="false">
              <image slot="icon" :src="crashIcon" class="top-img" />
              <text slot="title" class="top-title">{{ $t('mine.keTiXyE') }}</text>
            </u-cell>
          </view>
          <view class="middle">
            <view class="middle-left" @click="toMyWallet">¥{{ mountMoney }}</view>
            <view class="middle-right" @click="toWithdrawal"></view>
          </view>
          <view class="bottom">
            <u-grid :border="false" col="2">
              <u-grid-item customStyle="color:#fff;font-size:14px;">
                {{ $t('mine.jinRiLjYj') }}：¥{{ todayMoney }}
              </u-grid-item>
              <u-grid-item customStyle="color:#fff;font-size:14px;">
                {{ $t('mine.zuoRiLjYj') }}：¥{{ yestMoney }}
              </u-grid-item>
            </u-grid>
          </view>
        </view>
      </view>
      <view class="icon-list">
        <view class="list-item" @click="toMyOrderList">
          <image :src="orderIcon" class="list-img" />
          <view class="list-text">{{ $t('mine.woDeDd') }}</view>
        </view>
        <view class="list-item" @click="toMyMemberList">
          <image :src="memberIcon" class="list-img" />
          <view class="list-text">{{ $t('mine.huiYuanLb') }}</view>
        </view>
        <view class="list-item" @click="toUserOrderList">
          <image :src="userIcon" class="list-img" />
          <view class="list-text">{{ $t('index.yonghuDd') }}</view>
        </view>
        <view class="list-item" @click="toCrashRecord">
          <image :src="recordIcon" class="list-img" />
          <view class="list-text">{{ $t('mine.tiXianJl') }}</view>
        </view>
      </view>

      <view class="action-list">
        <view class="list-item" @click="editUser">
          <u-cell center icon="setting-fill" :title="$t('mine.bianJiZl')" :isLink="true" :border="false" customStyle="width:100%;pading:0;height:60px">
            <image slot="icon" :src="editIcon" class="list-img" />
          </u-cell>
        </view>
        <view class="list-item" @click="toBankList">
          <u-cell center icon="setting-fill" :title="$t('mine.zhangHuSz')" :isLink="true" :border="false" customStyle="width:100%;pading:0;height:60px">
            <image slot="icon" :src="accountIcon" class="list-img" />
          </u-cell>
        </view>
        <view class="list-item" @click="setPassWord">
          <u-cell center icon="lock" :title="$t('mine.sheZhiMm')" :isLink="true" :border="false" customStyle="width:100%;pading:0;height:60px">
            <image slot="icon" :src="passWordIcon" class="list-img" />
          </u-cell>
        </view>
        <view class="list-item" @click="loginOut">
          <u-cell center icon="setting-fill" :title="$t('mine.tuiChuDl')" :isLink="true" :border="false" customStyle="width:100%;pading:0;height:60px">
            <image slot="icon" :src="passWordIcon" class="list-img" />
          </u-cell>
        </view>
        <view class="list-item">
          <u-cell center icon="setting-fill" :isLink="true" :border="false" customStyle="width:100%;pading:0;height:60px">
            <image slot="icon" :src="langIcon" class="list-img" />
            <view slot="title">
              <picker :value="langIndex" :range="langArr" range-key="name" @change="langChange">
                <view class="lang-picker">{{ $t('mine.qieHuanYy') }}</view>
              </picker>
            </view>
          </u-cell>
        </view>
      </view>
      <tabBar />
    </view>
  </view>
</template>

<script>
import tabBar from "../../components/tabBar.vue";
export default {
  components: {
    tabBar,
  },
  computed: {
    imgPath() {
      return this.$config.baseURL + "/static/front";
    },
  },
  data() {
    return {
      isLoading: true,
      username: this.$t("index.denglu"),
      gender: "",
      age: "",
      phone: "",
      todayMoney: 0,
      yestMoney: 0,
      money: 0,
      crashIcon: "",
      bannerImg: "",
      mountMoney: 0,
      userType: "",
      token: uni.getStorageSync("token"),
      avatarUrl: "",
      orderIcon: "",
      memberIcon: "",
      userIcon: "",
      recordIcon: "",
      editIcon: "",
      accountIcon: "",
      passWordIcon: "",
      langIcon: "",
      mineBg: "",
      langIndex: 0,
      langArr: [
        {
          name: "简体中文",
          value: "zh-Hans",
        },
        {
          name: "繁体中文",
          value: "zh-Hant",
        },
      ],
    };
  },
  onLoad() {
    this.mineBg = this.imgPath + "/images/mine_bg.png";
    this.memberIcon = this.imgPath + "/images/icon/member.png";
    this.orderIcon = this.imgPath + "/images/icon/order.png";
    this.userIcon = this.imgPath + "/images/icon/mine_user.png";
    this.recordIcon = this.imgPath + "/images/icon/mine_record.png";
    this.editIcon = this.imgPath + "/images/icon/mine_edit.png";
    this.accountIcon = this.imgPath + "/images/icon/mine_account.png";
    this.passWordIcon = this.imgPath + "/images/icon/mine_password.png";
    this.avatarUrl = this.imgPath + "/images/icon/avatar.png";
    this.bannerImg = this.imgPath + "/images/mine_banner_bg.png";
    this.crashIcon = this.imgPath + "/images/icon/crash.png";
    this.langIcon = this.imgPath + "/images/word-a.png";
    this.getUserInfo();
  },
  onReady() {
    uni.setNavigationBarTitle({
      title: this.$t("page.geRenZx"),
    });
  },
  methods: {
    async getUserInfo() {
      const res = await this.$api.getPersonalInformation({});
      if (res.code === 0) {
        this.username = res.data.username;
        if (res.data.avatarUrl) {
          this.avatarUrl = res.data.avatarUrl;
        }
        this.money = res.data.money;
        this.gender = res.data.gender;
        this.age = res.data.age;
        this.phone = res.data.phone;
        this.todayMoney = res.data.todayMoney;
        this.yestMoney = res.data.yestMoney;
        this.userType = res.data.userType || "";
        this.mountMoney = res.data.mountMoney || 0;
        this.isLoading = false;
      }
    },
    async loginOut() {
      const that = this;
      uni.showModal({
        title: that.$t("mine.tiShi"),
        content: that.$t("mine.tuiChuDlQr"),
        cancelText: that.$t("mine.quXiao"),
        confirmText: that.$t("mine.queDing"),
        success: function (res) {
          if (res.confirm) {
            // that.$api.logout({}).then((res) => {
            //   if (res.code === 0) {
            //     uni.removeStorageSync("token");
            //     uni.reLaunch({
            //       url: "/pages/register/regist_index",
            //     });
            //   }
            // });
            uni.request({
              url: "https://app-api.chanson.ltd/auth/token/logout",
              method: "DELETE",
              data: {},
              header: {
                "Content-Type": "application/json",
                Authorization: "Bearer " + uni.getStorageSync("token"),
              },
              success: (res) => {
                if (res?.data?.code === 0) {
                  uni.removeStorageSync("token");
                  uni.reLaunch({
                    url: "/pages/register/regist_index",
                  });
                } else {
                  uni.$u.toast(res.data?.msg);
                }
              },
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    langChange(e) {
      this.langIndex = e.detail.value;
      if (e.detail.value === "0") {
        this.$i18n.locale = "zh-Hans";
        uni.setLocale("zh-Hans");
      } else {
        this.$i18n.locale = "zh-Hant";
        uni.setLocale("zh-Hant");
      }
    },
    toMyWallet() {
      uni.navigateTo({ url: "/pages/my_wallet/my_wallet" });
    },
    toBankList() {
      uni.navigateTo({ url: "/pages/card_list/card_list" });
    },
    editUser() {
      uni.navigateTo({ url: "/pages/user_edit/user_edit" });
    },
    toUserOrderList() {
      uni.navigateTo({ url: "/pages/user_order/user_order" });
    },
    toWithdrawal() {
      uni.navigateTo({ url: "/pages/withdrawal/withdrawal" });
    },
    toMyOrderList() {
      uni.navigateTo({ url: "/pages/my_order/my_order" });
    },
    toMyMemberList() {
      uni.navigateTo({ url: "/pages/my_member/my_member" });
    },
    toCrashRecord() {
      uni.navigateTo({ url: "/pages/withdrawal_record/withdrawal_record" });
    },
    setPassWord() {
      uni.navigateTo({ url: "/pages/set_password/set_password" });
    },
  },
};
</script>
<style lang="scss">
page {
  background-color: #f6f6f6;
}
</style>
<style lang="scss" scoped>
.index-mine {
  width: 100%;
  overflow: hidden;
  background: linear-gradient(356deg, #f6f6f6 0%, #ffffff 100%);
  padding-bottom: 40px;
  position: relative;
  .top-bg {
    position: absolute;
    width: 100%;
    height: 260px;
    left: 0;
    top: 0;
    z-index: 0;
    .top-bg-img {
      width: 100%;
      height: 260px;
    }
  }
  .avatar {
    height: 50px;
    overflow: hidden;
    padding: 30px 20px;
    display: flex;
    align-items: center;
    position: relative;
    .img {
      width: 60px;
      margin-right: 10px;
    }
    .user-info-text {
      color: #333;
      text {
        padding: 0 5px;
      }
    }
    .text {
      color: #333;
      font-size: 14px;
      .name {
        font-weight: bold;
        font-size: 16px;
        padding-bottom: 10px;
        .user-type {
          border-radius: 4px;
          border: 1px solid #75cecc;
          background: rgba(238, 249, 249, 0.39);
          font-size: 12px;
          margin-left: 15px;
          color: #75cecc;
          font-weight: normal;
          padding: 0 6px;
        }
      }
    }
  }
  .mine-banner {
    width: 100%;
    height: 150px;
    overflow: hidden;
    position: relative;
    .banner-img {
      width: calc(100% - 40px);
      height: 150px;
      position: absolute;
      left: 20px;
      top: 0;
      z-index: 0;
    }
    .banner-content {
      width: calc(100% - 60px);
      margin: 0 auto;
      overflow: hidden;
      height: 150px;
      position: absolute;
      z-index: 1;
      left: 30px;
      top: 0;
      /deep/ .u-cell__title-text {
        color: #fff;
      }
      .top {
        height: 40px;
        margin-top: 10px;
      }
      .top-img {
        width: 24px;
        height: 24px;
      }
      .top-title {
        color: #fff;
      }
      .middle {
        height: 40px;
        margin-top: 10px;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        padding: 0 0px 0 20px;
        .middle-left {
          font-size: 20px;
          color: #fff;
        }
        .middle-right {
          width: 100px;
        }
      }
    }
  }
  .icon-list {
    background: #fff;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    width: calc(100% - 30px);
    margin: 20px auto 0;
    display: flex;
    align-items: center;
    .list-item {
      width: 25%;
      text-align: center;
      .list-img {
        width: 40px;
        height: 40px;
      }
    }
    .list-text {
      font-size: 14px;
    }
  }
  .action-list {
    background: #fff;
    // height: 180px;
    border-radius: 8px;
    overflow: hidden;
    width: calc(100% - 30px);
    margin: 20px auto 0;
    .list-item {
      height: 60px;
      overflow: hidden;
      display: flex;
      align-items: center;
      /deep/ .u-cell__body {
        height: 60px;
      }
      .list-img {
        width: 30px;
        height: 30px;
      }
    }
  }
}
</style>
